<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>字体转 Base64 工具</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }
      h1 {
        text-align: center;
      }
      .upload-container {
        border: 2px dashed #ccc;
        border-radius: 5px;
        padding: 20px;
        text-align: center;
        margin-bottom: 20px;
      }
      input[type="file"] {
        margin-top: 10px;
      }
      #result {
        margin-top: 20px;
        white-space: pre-wrap;
        background-color: #f5f5f5;
        padding: 20px;
        border-radius: 5px;
        overflow-y: auto;
        max-height: 400px;
      }
      .copy-button {
        background-color: #4caf50;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 10px;
      }
      .copy-button:hover {
        background-color: #45a049;
      }
      .font-type {
        margin-top: 15px;
      }
    </style>
  </head>
  <body>
    <h1>字体转 Base64 工具</h1>
    <div class="upload-container">
      <p>点击下方按钮选择一个字体文件：</p>
      <input type="file" id="fileInput" accept=".ttf,.otf,.woff,.woff2" />
      <select id="fontType" class="font-type">
        <option value="auto">自动检测字体类型</option>
        <option value="ttf">.ttf</option>
        <option value="otf">.otf</option>
        <option value="woff">.woff</option>
        <option value="woff2">.woff2</option>
      </select>
      <button id="uploadBtn" class="copy-button">转换为 Base64</button>
    </div>
    <div id="result"></div>

    <div>使用示例</div>
    <pre>
@font-face {
  font-family: 'test';
  src: url("转换的内容");
}
.xxx{
  font-family: 'test';
}
    </pre>

    <script>
      document.getElementById("uploadBtn").addEventListener("click", function () {
        const fileInput = document.getElementById("fileInput");
        const file = fileInput.files[0];
        const fontType = document.getElementById("fontType").value;

        if (!file) {
          alert("请先选择一个文件");
          return;
        }

        const fileExtension = file.name.split(".").pop().toLowerCase();
        const validExtensions = ["ttf", "otf", "woff", "woff2"];

        if (!validExtensions.includes(fileExtension) && fontType === "auto") {
          alert("请上传支持的字体文件类型：.ttf, .otf, .woff, .woff2");
          return;
        }

        const reader = new FileReader();

        reader.onload = function (event) {
          let mimeType;
          let base64String = event.target.result;

          // 根据选择的字体类型自动设置MIME类型
          if (fontType === "auto") {
            switch (fileExtension) {
              case "ttf":
                mimeType = "font/ttf";
                break;
              case "otf":
                mimeType = "font/otf";
                break;
              case "woff":
                mimeType = "font/woff";
                break;
              case "woff2":
                mimeType = "font/woff2";
                break;
              default:
                mimeType = "font/ttf";
            }
          } else {
            switch (fontType) {
              case "ttf":
                mimeType = "font/ttf";
                break;
              case "otf":
                mimeType = "font/otf";
                break;
              case "woff":
                mimeType = "font/woff";
                break;
              case "woff2":
                mimeType = "font/woff2";
                break;
              default:
                mimeType = "font/ttf";
            }
          }

          base64String = `data:${mimeType};charset=utf-8;base64,${base64String.split(",")[1]}`;

          // 显示结果
          const resultDiv = document.getElementById("result");
          resultDiv.innerHTML = `
                    <h3>Base64 结果：</h3>
                    <textarea id="base64Result" style="width:100%;height:300px;">${base64String}</textarea>
                    <button class="copy-button" id="copyBtn">复制 Base64</button>
                `;

          // 添加复制按钮功能
          document.getElementById("copyBtn").addEventListener("click", function () {
            const textArea = document.getElementById("base64Result");
            textArea.select();
            document.execCommand("copy");
            alert("Base64 已复制到剪贴板");
          });
        };

        reader.readAsDataURL(file);
      });
    </script>
  </body>
</html>
